<template>
	<div>
	<el-dialog  :visible.sync="guanli" id="guan_li">
		<div class="zhong">
			<span style="font-weight:bolder;font-size:20px">基本信息</span>
			<el-button type="primary" style="float:right" @click="ModifyTop">修改</el-button>
		</div>
		<div  style="width:100%;margin-left:30px;font-size:20px">
			<ul :model="site" style="list-style:none;line-height:40px">
				<li >
					<div>
						<label>规则名称</label><span style="margin-left:60px">{{ site.name }}</span>
					</div>
					<div>
						<label>数据格式</label><span style="margin-left:60px">{{ site.format }}</span>
					</div>
					<div>
						<label>规则描述</label><span style="margin-left:60px">{{ site.desc }}</span>
					</div>
				</li>
			</ul>
		</div>
		<div style="width:90%;margin:20px; overflow:hidden;">
			<span style="font-weight:bolder;font-size:20px; display:block; float:left; line-height:68px;">处理数据</span>
			<p style="float:right;"><el-button type="primary" @click="sqlTest"  style="margin-left:50px">SQL调试</el-button>
			<el-button type="primary" @click="modifyCcont"  style="margin-left:50px" >修改</el-button></p>
		</div>
		<div style="width:90%;margin:20px;">
			<span style="font-weight:bolder;font-size:20px">转发数据</span>
			<el-button type="primary" style="float:right" @click="addInfo">添加操作</el-button>
		</div>
		<!--表格中的数据处理-->
		<div style="width:90%;margin:50px">
				<el-table 
				:data="guanliTable" 
				border
					:header-cell-class-name="tableheaderClassName"
					:row-class-name="tableRowClassName">
						<el-table-column  v-for="title in guanliTitles" :prop="title.prop" :label="title.label" sortable="custom">
						</el-table-column>
						 <el-table-column
							fixed="right"
							label="操作"
							width="100"
							header-align="center">
							<template slot-scope="scope">
							 <el-button   @click="ModifyFot(scope.row)"  size="small" type="text"><span  style="color:#212121">修改</span>
								</el-button>
								<el-button   @click="deleteDi(scope.row)" type="text" size="small"><span >删除</span>
								</el-button>
							</template>
						</el-table-column>
					</el-table>
		 </div>
	</el-dialog>
	<modifyTop></modifyTop>
	<addMode></addMode>
	<modifyFot></modifyFot>
	<sqlTest></sqlTest>
	<modifyCont></modifyCont>
	</div>	
</template>
<script>
import bus from '../../eventBus.js'
import addMode from './addMode.vue'
import modifyFot from './modify_fot.vue'
import modifyTop from './modify_top.vue'
import sqlTest from './sqlTest.vue'
import modifyCont from './modify_cont.vue'
import { getUserListPage, removeUser, } from '../../api/fictitious.js';
export default{
	name:'guanli',
	components: {
		addMode,
		modifyFot,
		modifyTop,
		sqlTest,
		modifyCont,
	},
	data(){
		return{
			guanli:false,
			site:{
				name:null,
				format:null,
				desc:null,
			},
			page: 1,
			total: 0,
			tableData:[],
			biao:"转发数据",
			guanliTable: [ ],
			//表格所需数据
			guanliTitles:[{
				prop: "name",
				label: "数据目的地"
			}],
		}
	},
	created(){
	},
	watch:{
		guanli:function(){
			var self=this;
			this.$nextTick(function(){
				this.getUsers();
				// 获取数据
				let user = sessionStorage.getItem('RuleManagement');
				if (user) {
					user = JSON.parse(user);
					self.site = user;
					console.log(self.site);
				}
			});
		},
	},
	methods:{
		//获取用户列表
		getUsers() {
			let para = {
				page: this.page,
				table:this.biao,
			};
			this.listLoading = true;
			getUserListPage(para).then((res) => {
				this.total = res.data.total;
				this.guanliTable = res.data.Forwarding_data;
				for (var i = 0; i <this.guanliTable.length; i++) {
					this.guanliTable[i].name=this.guanliTable[i].msg+this.guanliTable[i].mysql+this.guanliTable[i].table;
				}
				this.listLoading = false;
			});
		},
		//删除数据目的地
		deleteDi(row){
			this.$confirm('确定要删除转发数据吗？, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.listLoading = true;
				let para = { id: row.id, table:"转发数据" };
				removeUser(para).then(() => {
					this.listLoading = false;
					this.$message({
						message: '删除成功',
						type: 'success'
					});
					this.getUsers();
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});            
			});
		},
		//基本信息修改
		ModifyTop(){
			console.log("基本信息修改");
			bus.$emit("ModifyTop",true);
		},
		//SQL调试
		sqlTest:function(){
			bus.$emit("sqlTest",true);
			console.log("sql调试");
		},
		//SQL数据修改
		modifyCcont:function () {
			bus.$emit("modifyCcont",true);
			console.log("SQL数据修改");
		},
		//添加操作
		addInfo:function(){
			bus.$emit("addInfo",true);
			this.$message('你点击了添加操作！');
		},
		// 修改数据目的地
		ModifyFot:function(row){
			bus.$emit("ModifyFot",true);
			sessionStorage.setItem('ModifyFot', JSON.stringify(row));
		},
		tableRowClassName({rowIndex}) {
			if (rowIndex % 2==0) {
				
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		tableheaderClassName() {
			return "table-head-th";
		},
	},
	mounted(){
		// this.getUsers();
		var self=this;
		bus.$on("guanli",function (msg) {
			self.guanli=msg;
		});
		bus.$on("addMode",function () {
			self.getUsers();
		});
	}
}
</script>
<style scoped>
.zhong{ margin:20px;width:80%;}

</style>